<template>
  <div class="footer">
    <div class="cont">
      <div class="link">
        <div class="title">友情链接</div>
        <div class="linkList">
          <span v-for="(item, index) in link" :key="index">{{ item }}</span>
        </div>
        <div class="bor"></div>
      </div>
      <div class="contactUs">
        <div class="title">联系我们</div>
        <p>客服邮箱：abcd@bacd.cn</p>
        <p>地址：上海市黄浦区</p>
        <p>本站基于FISCO BCOS技术研发 由版权区块链联盟提供相关支持</p>
      </div>
    </div>
    <p class="copyright">版权所有 @上海科技发展有限公司 沪ICP备12345678号</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      link: [
        " 腾讯企鹅自媒体平台",
        " 今日头条",
        " 百家号",
        " 华云音乐",
        " 软著登记合作平台",
        " 一点资讯",
        " 知乎",
        " 版权家",
        " 微信公众平台",
        " 搜狐号",
        "  简书",
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
.footer {
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 80px;
  .cont {
    display: flex;
    width: 1600px;
    justify-content: space-between;
    .title {
      font-size: 14px;
      font-weight: bold;
      color: #666666;
      margin-bottom: 30px;
    }
    .link {
      position: relative;
      width: 900px;
      margin-right: 100px;
      .bor {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .linkList {
      font-size: 12px;
      color: #cccccc;
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 20px;
      span {
        display: block;
        width: 25%;
        margin-bottom: 28px;
      }
    }
    .bor {
      width: 1px;
      height: 73px;
      background: #8c8c8c;
      opacity: 0.5;
    }
    .contactUs {
      p {
        font-size: 12px;
        color: #cccccc;
        margin-bottom: 20px;
      }
    }
  }
  .copyright {
    font-size: 10px;
    background: #111111;
    color: #a3a3a3;
    height: 40px;
    width: 100%;
    margin: 0;
    text-align: center;
    line-height: 48px;
  }
}
</style>
